<template>
	<div class="fixed-nav">
		<ul>
			<li>
				<div class="fixed-autoImg">
					<router-link to="index">
            <img :src="$route.name==='index'?'static/imgs/shouye2.png':'static/imgs/shouye1.png'" alt="" title="全部任务"/>
					</router-link>
				</div>
        <p :style="{color:$route.name==='index'?'#4097FF':'#333333'}">首页</p>
			</li>
			<li>
        <router-link :to="{name:'mission'}">
          <div class="fixed-autoImg">
            <img :src="allTask?'static/imgs/qbrw2.png':'static/imgs/qbrw1.png'" alt="" title="全部任务"/>
          </div>
          <p :style="{color:allTask?'#4097FF':'#333333'}">全部任务</p>
        </router-link>

			</li>
			<li>
        <router-link :to="{name:'myAccount'}">
          <div class="fixed-autoImg">
            <img :src="$route.name==='myAccount'?'static/imgs/wdzh2.png':'static/imgs/wdzh1.png'" alt="" title="我的账户"/>
          </div>
          <p :style="{color:$route.name==='myAccount'?'#4097FF':'#333333'}">我的账户</p>
        </router-link>

			</li>
			<li>
        <router-link :to="{name:'orderDetails',query:{type:0}}">
          <div class="fixed-autoImg">
            <img :src="orderDetails?'static/imgs/ddxq2.png':'static/imgs/ddxq1.png'" alt="" title="订单详情"/>
          </div>
          <p :style="{color:orderDetails?'#4097FF':'#333333'}">订单详情</p>
        </router-link>

			</li>
			<li>
        <router-link :to="{name:'user'}">
          <div class="fixed-autoImg">
            <img src="static/imgs/fuck1.png" alt="" title="我"/>
          </div>
          <p :style="{color:isUser?'#4097FF':'#333333'}">我</p>
        </router-link>

			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'Footer',
		data(){
			return{

			}
		},
    computed:{
		  isUser(){
		    return ['user','userInfo','toMoney','userVip'].includes(this.$route.name)
      },
      orderDetails(){
        return ['orderDetails','taskAcceptBrowse'].includes(this.$route.name)
      },
		  allTask(){
		    return ['mission','task','taskDetails'].includes(this.$route.name)
      }
    }
	}
</script>

<style>
	.fixed-nav{
		width: 100%;
		height: 0.5rem;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #f7f7f9;
	}
	.fixed-nav ul li{
		width: 20%;
		height: 0.5rem;
		float:left;
	}
	.fixed-autoImg{
		width: 0.22rem;
		height: 0.22rem;
		margin: 0.05rem auto 0 auto;
	}
	.fixed-autoImg img{
		display: block;
		width: 100%;
		height: 100%;
	}
	.fixed-nav ul li p{
		text-align: center;
		color: #747474;
		font-size: 0.12rem;
		margin-top: 0.05rem;
	}
</style>
